<template>
  <div class="content-scbox">
    <div class="scbox-title">
      <div class="tit-le">
        <i @click="$router.go(-1)" class="iconfont icon-arrow-right"></i>
      </div>
      <div class="tit-rg">
        <span>我的收藏</span>
      </div>
    </div>
    <div class="scbox-content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="10"
        >
          <van-empty
            v-show="empty"
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="目前您还没有收藏过作品哦"
          />
          <van-skeleton v-show="skeleton" v-for="(item,index) of 4" :key="index" title avatar :row="5" />
          <div class="cont-scbox" v-for="(item,index) of collocetlist" :key="index">
            <div class="zp-msg" @click="gozpide(item.release)" v-if="item.release">
              <div class="msg-uinfo">
                <div class="ui-le">
                  <img :src="item.release.user.uportrait" alt="">
                  <div class="le-msg">
                    <span>{{ item.release.user.username }}</span>
                    <span>{{ item.release.newaddTime }}</span>
                  </div>
                </div>
                <div class="ui-rg">
                  <div class="rg-box">
                    <span>阅读 {{ item.release.workflow }}</span>
                  </div>
                </div>
              </div>
              <div class="msg-text">
                <span>{{ item.release.themetext }}</span>
              </div>
              <div class="msg-img">
                <div class="img_box" v-for='(imgs,index) of item.release.imgs' :key='index' v-show="index<6">
                  <img :src="imgs" alt="" @click.stop="getImg(item.release.imgs,index)">
                  <div class="img-flow" v-if="index==5" @click.stop="getImg(item.release.imgs,index)">
                    <span>+{{images.length-6}}</span>
                  </div>
                </div>
              </div>
              <div class="msg-cz">
                <div class="cz-le">
                  <div class="le-gzbox">
                    <span>+ 关注</span>
                  </div>
                </div>
                <div class="cz-rg">
                  <div class="cz-box">
                    <i class="iconfont icon-dianzan2"></i>
                    <span>{{ item.release.thumbs.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-pinglun3"></i>
                    <span>{{ item.release.comments.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-fenxiang"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="yp-msg" @click="goypide(item.appointment)" v-if="item.appointment">
              <div class="msg-uinfo">
                <div class="ui-le">
                  <img :src="item.appointment.user.uportrait" alt="">
                  <div class="le-msg">
                    <span>{{ item.appointment.user.username }}</span>
                    <span>{{ item.appointment.newaddTime }}</span>
                  </div>
                </div>
                <div class="ui-rg">
                  <div class="rg-box">
                    <i class="iconfont icon-dizhi"></i>
                    <span>{{ item.appointment.apAdress }}</span>
                  </div>
                </div>
              </div>
              <div class="msg-text">
                <span>{{ item.appointment.aprequirement }}</span>
                <span>期望拍摄时间: {{ item.appointment.newypTime }}</span>
                <span>约{{ item.appointment.apType }}</span>
                <div class="msg-theme">
                  <span>主题: </span>
                  <span v-for="(theme,index) of item.appointment.aptheme" :key="index">{{ theme }}</span>
                </div>
              </div>
              <div class="msg-img">
                <div class="img_box" v-for='(aimgs,index) of item.appointment.imgs' :key='index' v-show="index<2">
                  <img :src="aimgs" alt="" @click.stop="getImg(item.appointment.imgs,index)">
                  <div class="img-flow" v-if="index==2" @click.stop="getImg(item.appointment.imgs,index)">
                    <span>+{{item.appointment.imgs.length-2}}</span>
                  </div>
                </div>
              </div>
              <div class="msg-cz">
                <div class="cz-le">
                  <div class="le-gzbox">
                    <span>+ 关注</span>
                  </div>
                </div>
                <div class="cz-rg">
                  <div class="cz-box">
                    <i class="iconfont icon-dianzan2"></i>
                    <span>{{ item.appointment.thumbs.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-pinglun3"></i>
                    <span>{{ item.appointment.comments.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-fenxiang"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="jc-msg" @click="gojcide(item.tutorial)" v-if="item.tutorial">
              <div class="msg-img-box">
                <img :src="item.tutorial.imgs[0]" alt="">
              </div>
              <div class="msg-text">
                <div class="text-theme">
                  <span>{{ item.tutorial.tttheme }}</span>
                </div>
                <div class="text-content">
                  <span>{{ item.tutorial.tocontent }}</span>
                </div>
              </div>
              <div class="msg-cz">
                <div class="cz-le">
                  <span>{{ item.tutorial.newaddTime }}</span>
                </div>
                <div class="cz-rg">
                  <div class="cz-box">
                    <i class="iconfont icon-dianzan2"></i>
                    <span>{{ item.tutorial.thumbs.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-pinglun3"></i>
                    <span>{{ item.tutorial.comments.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-fenxiang"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="cd-msg" @click="gocdide(item.field)" v-if="item.field">
              <div class="msg-img-box">
                <img :src="item.field.pictures[0].photourl" alt="">
              </div>
              <div class="msg-text">
                <div class="text-theme">
                  <span>{{ item.field.fieldname }}</span>
                </div>
                <div class="text-content">
                  <span>{{ item.field.introduce }}</span>
                </div>
              </div>
              <div class="msg-cz">
                <div class="cz-le">
                  <div class="le-icon">
                    <i class="iconfont icon-chengshi"></i>
                    <span>{{ item.field.fieldType }}</span>
                  </div>
                  <div class="le-icon">
                    <i class="iconfont icon-dizhi"></i>
                    <span>{{ item.field.fieldAdress }}</span>
                  </div>
                </div>
                <div class="cz-rg">
                  <div class="cz-box">
                    <span>浏览: {{ item.field.browse }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant';

export default {
  name: "usercollcet",
  data(){
    return{
      page: 1,
      collocetlist: [],
      loading: false,
      finished: false,
      refreshing: false,
      skeleton: true,
      empty: false,
      uscpage: null,
    }
  },
  created() {
    const uid = localStorage.getItem('uid');
    this.usercol(uid)
  },
  methods:{
    async onRefresh(){
      this.skeleton = true
      setTimeout(() => {
        const uid = localStorage.getItem("uid");
        this.collocetlist = []
        this.page = 1
        this.usercol(uid)
        this.refreshing = false;
        this.finished = false;
        this.skeleton = false;
      }, 1000);
    },
    onLoad(){
      console.info("加载数据")
      const uid = localStorage.getItem("uid");
      this.loading = true;
      if (this.page > this.uscpage) {
        setTimeout(()=>{
          this.loading = false;
          this.finished = true;
        },1000)
      }else {
        setTimeout(()=>{
          this.usercol(uid)
          this.loading = false;
        },1000)
      }
    },
    async gozpide(item){
      try {
        const res = await this.$axios({
          url:'/blog/releaseupdate',
          method:"post",
          data:{
            releaseid: item.releaseid,
            workflow: parseInt(item.workflow) + 1,
          }
        })
        const {success, msg} = res.data
        if(success){
          item.workflow = parseInt(item.workflow) + 1
          this.$router.push({
            name: "zpisd",
            params: {
              release: item
            }
          })
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    async goypide(item){
      try {
        const res = await this.$axios({
          url:'/blog/appointupdate',
          method:"post",
          data:{
            appointmentid: item.appointmentid,
            browse: parseInt(item.browse) + 1,
          }
        })
        const {success, msg} = res.data
        if(success){
          item.browse = parseInt(item.browse) + 1
          this.$router.push({
            name: "ypisd",
            params: {
              appointment: item
            }
          })
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    async gojcide(item){
      try {
        const res = await this.$axios({
          url:'/blog/tutorialupdate',
          method:"post",
          data:{
            tutorialid: item.tutorialid,
            browse: parseInt(item.browse) + 1,
          }
        })
        const {success, msg} = res.data
        if(success){
          item.browse = parseInt(item.browse) + 1
          this.$router.push({
            name: "jcisd",
            params: {
              tutorial: item
            }
          })
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    async gocdide(item){
      try {
        const res = await this.$axios({
          url:'/blog/fieldupdate',
          method:"post",
          data:{
            fieldid: item.fieldid,
            browse: parseInt(item.browse) + 1,
          }
        })
        const {success, msg} = res.data
        if(success){
          item.browse = parseInt(item.browse) + 1
          this.$router.push({
            name: "cdisd",
            params: {
              field: item
            }
          })
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    getImg(images, index) {
      ImagePreview({
        images: images,
        showIndex: true,
        loop: false, //是否循环播放
        startPosition: index
      })
    },
    async usercol(uid){
      try {
        const res = await this.$axios({
          url: '/blog/collcetionfind',
          method: 'post',
          data: {
            uid,
            page: this.page,
          }
        })
        const { success, data, msg, maxpage } = res.data;
        if( success ){
          if(data.rows.length == 0 && this.page == 1){
            this.empty = true
            this.skeleton = false
          }
          if(data.rows.length != 0){
            this.skeleton = false;
          }
          data.rows.map(r=>{
            if(r.release != null){
              const zpyear = new Date(r.release.addTime).getFullYear();
              const zpmouth = `${new Date(r.release.addTime).getMonth()+1}`.padStart(2, 0);
              const zpday = `${new Date(r.release.addTime).getDate()}`.padStart(2, 0);
              r.release.newaddTime = `${zpyear}-${zpmouth}-${zpday}`
              r.release.imgs = []
              r.release.pictures.map(url => {
                r.release.imgs.push(url.photourl)
              })
            }else if(r.appointment != null){
              const ypyear = new Date(r.appointment.addTime).getFullYear();
              const ypmouth = `${new Date(r.appointment.addTime).getMonth()+1}`.padStart(2, 0);
              const ypday = `${new Date(r.appointment.addTime).getDate()}`.padStart(2, 0);
              const nypyear = new Date(r.appointment.apTime).getFullYear();
              const nypmouth = `${new Date(r.appointment.apTime).getMonth()+1}`.padStart(2, 0);
              const nypday = `${new Date(r.appointment.apTime).getDate()}`.padStart(2, 0);
              r.appointment.newaddTime = `${ypyear}-${ypmouth}-${ypday}`
              r.appointment.newypTime = `${nypyear}-${nypmouth}-${nypday}`
              r.appointment.imgs = []
              r.appointment.aptheme = r.appointment.aptheme.split(',')
              r.appointment.pictures.map(url => {
                r.appointment.imgs.push(url.photourl)
              })
            }else if(r.field != null){
              const cdyear = new Date(r.field.fieldTime).getFullYear();
              const cdmouth = `${new Date(r.field.fieldTime).getMonth()+1}`.padStart(2, 0);
              const cdday = `${new Date(r.field.fieldTime).getDate()}`.padStart(2, 0);
              r.field.newaddTime = `${cdyear}-${cdmouth}-${cdday}`
              r.field.imgs = []
              r.field.suitable = r.field.suitable.split(',')
              r.field.pictures.map(url => {
                r.field.imgs.push(url.photourl)
              })
            }else if(r.tutorial != null){
              const jcyear = new Date(r.tutorial.addTime).getFullYear();
              const jcmouth = `${new Date(r.tutorial.addTime).getMonth()+1}`.padStart(2, 0);
              const jcday = `${new Date(r.tutorial.addTime).getDate()}`.padStart(2, 0);
              r.tutorial.newaddTime = `${jcyear}-${jcmouth}-${jcday}`
              r.tutorial.imgs = []
              r.tutorial.pictures.map(url => {
                r.tutorial.imgs.push(url.photourl)
              })
            }
          })
          this.uscpage = maxpage
          data.rows.forEach(r=>{
            this.collocetlist.push(r)
          })
          this.page++;
          console.info(this.collocetlist)
        }else {
          console.info(msg)
        }
      }catch (e) {

      }
    },
  },
}
</script>

<style scoped lang="scss">
.content-scbox{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .scbox-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    border-bottom: vw(1) solid #d5d5d5;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .scbox-content{
    flex: 1;
    width: 100%;
    background-color: #ffffff;
    overflow-y: auto;
    .cont-scbox{
      border-top: vw(5) solid #d5d5d5;
      .zp-msg{
        width: vw(690);
        margin: vw(10) auto;
        .msg-uinfo{
          width: 100%;
          height: vw(100);
          display: flex;
          .ui-le{
            width: vw(510);
            display: flex;
            align-items: center;
            img{
              width: vw(85);
              height: vw(85);
              border-radius: 50%;
              object-fit: cover;
            }
            .le-msg{
              padding-left: vw(30);
              display: flex;
              flex-direction: column;
              line-height: vw(40);
              span{
                font-size: vw(28);
                &:last-child{
                  color: #d5d5d5;
                  font-size: vw(24);
                }
              }

            }
          }
          .ui-rg{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .rg-box{
              width: vw(100);
              height: vw(40);
              border-radius: vw(30);
              border: 1px solid #d5d5d5;
              justify-content: center;
              display: flex;
              align-items: center;
              span{
                font-size: vw(20);
                color: #d5d5d5;
              }
            }
          }
        }
        .msg-img{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          padding-top: vw(10);
          .img_box{
            position: relative;
            padding-right: vw(10);
            img{
              width: vw(220);
              height: vw(220);
              object-fit: cover;
            }
            .img-flow{
              position: absolute;
              width: vw(220);
              height: vw(220);
              top: 0;
              background-color: #00000070;
              display: flex;
              align-items: center;
              justify-content: center;
              span{
                font-size: vw(60);
                color: #b3aaaa;
              }
            }
          }
        }
        .msg-cz{
          display: flex;
          .cz-le{
            display: flex;
            align-items: center;
            .le-gzbox{
              width: vw(120);
              height: vw(40);
              border: 1px solid lightsalmon;
              border-radius: vw(20);
              justify-content: center;
              display: flex;
              align-items: center;
              span{
                font-size: vw(20);
                color: lightsalmon;
              }
            }
          }
          .cz-rg{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .cz-box{
              padding:vw(15);
              display: flex;
              align-items: center;
              i{
                font-size: vw(40);
              }
              span{
                margin-left: vw(10);
                font-size: vw(30);
              }
            }
          }
        }
      }
      .yp-msg{
        width: vw(690);
        margin: vw(10) auto;
        .msg-uinfo{
          width: 100%;
          height: vw(100);
          display: flex;
          .ui-le{
            width: vw(510);
            display: flex;
            align-items: center;
            img{
              width: vw(85);
              height: vw(85);
              border-radius: 50%;
              object-fit: cover;
            }
            .le-msg{
              padding-left: vw(30);
              display: flex;
              flex-direction: column;
              line-height: vw(40);
              span{
                font-size: vw(28);
                &:last-child{
                  color: #d5d5d5;
                  font-size: vw(24);
                }
              }

            }
          }
          .ui-rg{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .rg-box{
              justify-content: center;
              display: flex;
              align-items: center;
              span{
                padding-left: vw(10);
                font-size: vw(25);
              }
            }
          }
        }
        .msg-text{
          display: flex;
          flex-direction: column;
          font-size: vw(28);
          color: #666666;
          &>span{
            &:first-child{
              font-size: vw(40);
              color: #000000;
            }
          }
          .msg-theme{
            span{
              padding-right: vw(10);
            }
          }
        }
        .msg-img{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          padding-top: vw(10);
          .img_box{
            position: relative;
            img{
              width: vw(335);
              height: vw(500);
              object-fit: cover;
              &:first-child{
                margin-right: vw(10);
              }
            }
            .img-flow{
              position: absolute;
              width: vw(50);
              height: vw(50);
              bottom: vw(10);
              right: 0;
              background-color: #00000070;
              display: flex;
              align-items: center;
              justify-content: center;
              span{
                font-size: vw(30);
                color: #b3aaaa;
              }
            }
          }
        }
        .msg-cz{
          display: flex;
          .cz-le{
            display: flex;
            align-items: center;
            .le-gzbox{
              width: vw(120);
              height: vw(40);
              border: 1px solid lightsalmon;
              border-radius: vw(20);
              justify-content: center;
              display: flex;
              align-items: center;
              span{
                font-size: vw(20);
                color: lightsalmon;
              }
            }
          }
          .cz-rg{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .cz-box{
              padding:vw(15);
              display: flex;
              align-items: center;
              i{
                font-size: vw(40);
              }
              span{
                margin-left: vw(10);
                font-size: vw(30);
              }
            }
          }
        }
      }
      .jc-msg{
        width: vw(690);
        margin: vw(10) auto;
        .msg-img-box{
          img{
            width: 100%;
            height: vw(400);
            object-fit: cover;
          }
        }
        .msg-text{
          margin-top: vw(20);
          .text-theme{
            font-size: vw(35);
            font-weight: bold;
          }
          .text-content{
            font-size: vw(25);
            -webkit-line-clamp: 2;
            letter-spacing:2px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
        }
        .msg-cz{
          display: flex;
          .cz-le{
            display: flex;
            align-items: center;
            span{
              font-size: vw(25);
              color: #d5d5d5;
            }
          }
          .cz-rg{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .cz-box{
              padding:vw(15);
              display: flex;
              align-items: center;
              i{
                font-size: vw(40);
              }
              span{
                margin-left: vw(10);
                font-size: vw(30);
              }
            }
          }
        }
      }
      .cd-msg{
        width: vw(690);
        margin: vw(10) auto;
        .msg-img-box{
          img{
            width: 100%;
            height: vw(400);
            object-fit: cover;
          }
        }
        .msg-text{
          margin-top: vw(20);
          .text-theme{
            font-size: vw(35);
            font-weight: bold;
          }
          .text-content{
            padding-top: vw(20);
            font-size: vw(25);
            -webkit-line-clamp: 2;
            letter-spacing:2px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            white-space: normal;
            color: #acacac;
          }
        }
        .msg-cz{
          display: flex;
          .cz-le{
            display: flex;
            align-items: center;
            .le-icon{
              font-size: vw(30);
              color: lightcoral;
              padding-right: vw(15);
              i{
                padding-right: vw(10);
              }
            }
          }
          .cz-rg{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .cz-box{
              padding:vw(15);
              display: flex;
              align-items: center;
              span{
                margin-left: vw(10);
                font-size: vw(30);
                color: #a3a3a3;
              }
            }
          }
        }
      }
    }
  }
}
</style>
